<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <!-- CSS Begins       -->
        <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
        <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
        <link rel="stylesheet" href="css/login.css" type="text/css">
        <!--   End of CSS            -->
        <!----------Scripts--------->
        <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <script src="js/handlebars-v1.3.0.js" type="text/javascript"></script>
        <script src="js/jquery.cookie.js" type="text/javascript"></script>
        <script src="js/handlebars-v1.3.0.js" type="text/javascript"></script>
        <script src="js/custom.js" type="text/javascript"></script>
        <script src="js/jquery.validate.js" type="text/javascript"></script>
        <!-----End of Scripts---->

        <script type="text/javascript">

            $(function() {
                //handlebars injection
                includes("navbartop_Templ", {}, "#pageNavigation");
//                $('#userid').val($.cookie('userid'));

                //login success
                function success()
                {
//                    $.cookie('userid', $('#userid').val());
                    window.location.replace("index.html");

                }
                //failed login
                function fail()
                {
                    includes("warning_Templ", {warning: "The username and password you typed is incorrect please try agin"}, "#msg");
                }

                $("#submitBtn").click(function() {

                    //---cookie creation----//


                    //---end of cookies---//


                    var authenticateObj = {userid: $("#userid").val(), password: $("#password").val()};
                    $("#submitBtn").toAjax("test", success, fail, authenticateObj);
                    //-------------redirect-----------------                                        

                });
            });

        </script>
        <!---Scripts--->

    </head>
    <body>
        <div id="pageNavigation"></div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div class="container-fluid">
            <div class="row"> 
                <div class="col-md-4 col-md-offset-3">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Login</div>
                        <div class="panel-body">
                            <form class="bs-example form-horizontal">
                                <fieldset>
                                    <div id="msgPane">

                                    </div>
                                    <div class="form-group">
                                        <label for="inputEmail3" class="col-sm-3 control-label">
                                            Username: </label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" required name="userid" id="userid" placeholder="Username">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputPassword3" class="col-sm-3 control-label">
                                            Password: </label>
                                        <div class="col-sm-9">
                                            <input type="password" class="form-control" required name="password" id="password" placeholder="Password">
                                        </div>
                                    </div>
                                    <div class="form-group last">
                                        <div class="col-lg-10 col-lg-offset-2">
                                            <button type="button" id="submitBtn" name="button" value="Submit" class="btn btn-primary">Sign In</button>&nbsp;&nbsp;
                                            <button type="reset" id="resetbtn" name="button" value="Reset" class="btn btn-default">Reset</button>&nbsp;&nbsp;

                                        </div>
                                    </div>

                                </fieldset>
                            </form>

                        </div>
                        <div class="panel-footer">
                            Not Registred? <a href="CustomerRegistration.html">Register here</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div id="msg">

        </div>
    </body>
</html>
